//物资采购结算 列表
<template>
    <!-- <div lass="base-page"> -->
    <!-- 列表 ↓ -->
    <!-- <div class="right"> -->

    <div class="e-table billList">
        <opstep :stepInfo="stepsArr"></opstep>
        <div class="top">
            <div class="left">
                <div>
                    <el-button
                        type="mini"
                        @click="goAdd"
                        style="background: #7aa818; color: #fff"
                        v-permission="['edit']"
                        >新增</el-button
                    >
                </div>
            </div>
            <div class="search_box">
                <el-input
                    class="ipt"
                    type="text"
                    placeholder="输入搜索关键字"
                    v-model="query.keyword"
                    @blur="getData"
                    @keyup.enter.native="getData"
                    ><img
                        src="@/assets/search.png"
                        slot="suffix"
                        @click="getData"
                /></el-input>
                <div>
                    <el-button
                        size="small"
                        style="background: #2e61d7; color: #fff"
                        @click="onAdvanceSearch"
                        >高级搜索</el-button
                    >
                </div>
            </div>
        </div>

        <el-table
            border
            ref="table"
            :data="tableData"
            style="width: 100%"
            class="table"
            highlight-current-row
            height="0"
            v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'table' }"
        >
            <el-table-column
                prop="billNo"
                label="结算编号"
                min-width="300"
                fixed
                show-overflow-tooltip
            >
                <template slot-scope="scope">
                    <span
                        style="color: blue; cursor: pointer"
                        @click="goSee(scope.row)"
                        >{{ scope.row.billNo }}</span
                    >
                </template>
            </el-table-column>
            <!-- <el-table-column prop="billNo" label="结算编号"> </el-table-column> -->

            <el-table-column prop="settlementDate" label="结算日期" width="150" fixed>
            </el-table-column>
            <el-table-column
                prop="settlementUnitName"
                label="结算单位"
                width="150"
            >
            </el-table-column>
            <el-table-column label="业务类型" width="130">
                <template slot-scope="{ row }">
                    <span>{{
                        [
                            '零星采购计划',
                            '物资采购合同',
                            '调拔单'
                        ][row.businessType]
                    }}</span>
                </template>
            </el-table-column>

            <el-table-column
                prop="amount"
                label="结算金额(元)"
                align="right"
                width="130"
            >
            </el-table-column>
            <el-table-column
                prop="totalAmount"
                label="税价合计(元)"
                width="110"
                align="right"
            >
            </el-table-column>

            <el-table-column label="单据来源" width="110">
                <template slot-scope="{ row }">
                    <span>{{ row.billSource == 1 ? '新增' : '验结一体' }}</span>
                </template>
            </el-table-column>

            <el-table-column
                prop="cumulativeSettlementAmount"
                label="累计结算金额(元)"
                align="right"
                width="150"
            >
            </el-table-column>
            <el-table-column prop="evaluationLevel" label="评价">
                <template slot-scope="scope">
                    <span
                        @click="dynamicEvaluation(scope.row)"
                        style="color: blue; cursor: pointer"
                    >
                        {{
                            scope.row.evaluationLevel
                                ? scope.row.evaluationLevel
                                : '动态评价'
                        }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="state" label="状态">
                <template slot-scope="{ row }">
                    <ToolHistory
                        v-if="row.state === 1"
                        url="/materialsettle/flowEngin/getAuditHistory"
                        :billId="row.billId"
                        :billType="1020"
                    >
                        <span v-status="row.state">
                            {{ state.find(x => x.value == row.state).label }}
                        </span>
                    </ToolHistory>
                    <span v-status="row.state" v-else>{{
                        state.find(x => x.value == row.state).label
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="redBillState" label="红单状态">
                <template v-slot="{ row }">
                    <span
                        style="color: blue; cursor: pointer"
                        @click="redClick(row)"
                        >{{ row.redState }}</span
                    >
                </template>
            </el-table-column>
            <el-table-column
                prop="orgName"
                label="所属机构"
                min-width="220"
                show-overflow-tooltip
                align="left"
            >
            </el-table-column>
        </el-table>
        <Pagination
            :total="total"
            :pageSize.sync="query.limit"
            :currentPage.sync="query.page"
            @currentChange="getData"
            @sizeChange="getData"
            class="bottomSetting"
        />
    </div>
</template>

<script>
import Pagination from '@/components/pagination/pagination'
// import AttachComp from '@/components/common/attachIndex'
// import ComPagination from '@/components/pagination/pagination.vue'
import request from '@/api/materialSettlement/materialProcurement.js'
import publicRequest from '@/api/materialSettlement/public.js'
import opstep from '@/components/topstep/topstep.vue'
import {
    vueDom,
    debounce,
    openAppClient,
    advanceSearch,
    showLoading,
    hideLoading
} from '@/utils/common.js'
import { mapMutations, mapState } from 'vuex'

export default {
    components: {
        Pagination,
        opstep
        // AttachComp, //附件信息
        // ComPagination, //分页组件
    },

    data () {
        return {
            evaluationBasis: {
                contractName: '', //合同名称
                contractNo: '', //合同编号
                outerId: '', //外包方id
                outerName: '', //外包方名称
                billId: '', //调用单据id
                billType: '1020', //	调用单据编号
                evaluatePeople: '', //评价人
                evaluatePeopleId: '', //评价人id
                orgId: '', //评价机构id
                orgName: '', //	评价机构名称
                settleNo: '', //结算编号
                useType: 4
            },
            stepsArr: [
                { description: '①现场收料' },
                { description: '②物资验收' },
                { description: '③采购结算' }
            ],
            query: {
                beginPlanDate: '',
                businessType: [],
                endPlanDate: '',
                keyword: '',
                limit: 20,
                orgId: '',
                page: 1,
                settlementUnitId: '',
                states: []
            }, //搜索
            tableData: [], //表格
            tableHeight: 0,
            total: 1,
            auditParams: {
                billId: '',
                billType: 1020,
                freeNextUnitIndex: null,
                freeNextUser: '',
                isPass: true,
                isShareInAudit: true,
                opinion: '',
                orgId: '',
                orgName: '',
                userId: '',
                workId: ''
            }
        }
    },
    computed: {
        ...mapState({
            state: state => state.equip.equipData.state //通用流程状态
        })
    },

    created () {
        let data = JSON.parse(localStorage.getItem('vuex'))
        this.evaluationBasis.orgId = data.userInfo.orgInfo.orgId
        this.evaluationBasis.orgName = data.userInfo.orgInfo.orgName
        this.evaluationBasis.evaluatePeople = data.userInfo.userName
        this.evaluationBasis.evaluatePeopleId = data.userInfo.userId
        this.getData()
    },
    mounted () {
        vueDom(
            () => {
                this.tableHeight = document.body.clientHeight - 240
            },
            () => {
                return $('table').length !== 0
            }
        )
        this.fn = () => {
            this.tableHeight = document.body.clientHeight - 240
        }
        window.onresize = debounce(this.fn)
    },
    methods: {
        ...mapMutations(['setEvaluation', 'setSelectedInfo']),
        async getData () {
            try {
                showLoading()
                const res = await request.getpaymentList(this.query)
                let data = res.list || []
                data.forEach(item => {
                    switch (item.redBillState) {
                    // 用redState来表示值的目的是:不改变原有的redBillState的数字值,否则在跳转页面时不方便做判断
                    case -1:
                        item.redState = ''
                        break
                    case 0:
                        item.redState = '冲销中'
                        break
                    case 1:
                        item.redState = '冲销中'
                        break
                    case 2:
                        item.redState = '已冲销'
                        break
                    case 3:
                        item.redState = '红单'
                        break
                    }
                })
                this.tableData = data
                this.total = res.totalCount
            } finally {
                hideLoading()
            }
        },
        async onAdvanceSearch () {
            advanceSearch('/supplierPaymentSearch').then(res => {
                this.query.beginPlanDate = res.beginPlanDate
                this.query.businessType = res.contractType
                this.query.endPlanDate = res.endPlanDate
                this.query.orgId = res.orgId
                this.query.states = res.states
                this.query.settlementUnitId = res.settlementUnitId
                this.getData()
            })
        },

        dynamicEvaluation (row) {
            this.evaluationBasis.contractName = row.sourceBillName
            this.evaluationBasis.contractNo = row.sourceBillNo
            this.evaluationBasis.outerId = row.settlementUnitId
            this.evaluationBasis.outerName = row.settlementUnitName
            this.evaluationBasis.billId = row.billId
            this.evaluationBasis.settleNo = row.billNo
            this.setEvaluation(this.evaluationBasis)
            // this.setSelectedInfo(this.evaluationBasis)
            // openAppClient('/showSelectedData', '存入vuex里面的数据')
            openAppClient(
                '/dynamicEvaluation',
                '动态评价',
                () => {
                    // alert('999')
                    this.getData()
                },
                null,
                null,
                'handleAdd'
            )
        },

        goSee (row) {
            console.log(row)
            // this.$router.push({ path: '/materialProcurement', query: { was: 'see', billid: row.billId, billtype: '1020', state: row.state2 } })
            // const billid = row.billId
            // const auditParams = {
            //     billId: billid,
            //     billType: '1020'
            // }
            // 如果是验结一体的单据,需要当作已审核的单据来操作
            if (row.billSource === 2) {
                this.$router.push({
                    path: '/materialProcurementView',
                    query: { billid: row.billId }
                })
            } else {
                this.auditParams.billId = row.billId
                if (row.state === -1 || row.state === 2 || row.state === 5 || !this.permission(['edit'])) {
                    this.$router.push({
                        path: '/materialProcurementView',
                        query: { billid: row.billId }
                    })
                } else {
                    publicRequest
                        .getCurrentUnitInfo(this.auditParams)
                        .then(res => {
                            if (res.canModify) {
                                this.$router.push({
                                    path: '/materialProcurementEdit',
                                    query: { billid: row.billId }
                                })
                            } else {
                                this.$router.push({
                                    path: '/materialProcurementView',
                                    query: { billid: row.billId }
                                })
                            }
                        })
                }
            }
        },
        redClick (row) {
            if (row.billSource === 2) {
                this.$router.push({
                    path: '/materialProcurementView',
                    query: { billid: row.billId }
                })
            } else {
                if (row.redBillState == 3) {
                    // 如果该单据就是红单,则点击时进入源单详情页
                    this.$router.push({
                        path: '/materialProcurementView',
                        query: { billid: row.sourceId }
                    })
                } else {
                    // 如果点击的该单据不是红单,则点击超链接进入红单
                    // 如果进入红单,还需判断进入该红单的编辑页还是详情页
                    if (row.redBillState == 0) {
                        this.$router.push({
                            path: '/materialProcurementEdit',
                            query: { billid: row.redBillId }
                        })
                    } else if (row.redBillState == 1 || row.redBillState == 2) {
                        this.$router.push({
                            path: '/materialProcurementView',
                            query: { billid: row.redBillId }
                        })
                    }
                }
            }
        },
        goAdd () {
            //点击新增触发
            this.$router.push({ path: '/materialProcurementAdd' })
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__fixed{
    height: 98.5% !important;
    bottom: 17px !important;
}
::v-deep .el-table__fixed-body-wrapper {
    height: 100% !important;
}
</style>
